<template>
	<div>
		<el-dialog
			:title="formTitle"
			:visible.sync="visible"
			append-to-body
			width="50%"
			:before-close="dialogBeforeClose"
			@closed="handlerClosed"
		>
			<el-form
				ref="form"
				:model="formData"
				:rules="rules"
				label-width="80px"
				:inline="false"
				size="normal"
			>
				<el-form-item label="标签数据" prop="title">
					<el-input v-model="formData.tagData" clearable />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" size="medium" @click="onSubmit">
						确定
					</el-button>
					<el-button size="medium" @click="handlerCancel"> 取消 </el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		curData: {
			type: Object,
			default: () => {
				return {}
			},
		},
		visible: {
			type: Boolean,
			default: false,
		},
		formTitle: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			rules: {
				whetherEnable: [
					{ required: true, message: '请选择是否启用', trigger: 'blur' },
				],
			},
		}
	},
	computed: {
		formData() {
			return this.curData || {}
		},
	},
	methods: {
		handlerClosed() {},
		dialogBeforeClose() {
			this.$emit('update:visible', false)
			this.$emit('update:curData', {})
			this.handlerResetFields()
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.formData.id = this.formData.id == '-1' ? null : this.formData.id
					this.$emit('submit', this.formData)
				} else {
					return false
				}
			})
		},
		handlerCancel() {
			this.handlerResetFields()
			this.dialogBeforeClose()
		},

		handlerResetFields() {
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
